<template>
  <!-- 新增菜单--------------------------------------  p2------------------------------------------------ -->
  <div class="container-homework">
    <div class="same_title">
      <p></p>
      <p>适应年级<span>（可多选）</span></p>
    </div>
    <!-- 适应年纪 -->
    <div class="class_box">
      <div
        :class="item.istap == 1 ? 'button_active' : ''"
        v-for="(item, index) in class_arr"
        :key="index"
        @click="change_class(index)"
      >
        {{ item.name }}
      </div>
    </div>

    <!-- 菜单专为下列哪项成绩不合格的学生定制 -->
    <div class="same_title">
      <p></p>
      <p>菜单专为下列哪项成绩不合格的学生定制<span>（可多选）</span></p>
    </div>

    <div class="class_box sport_box">
      <div
        :class="item.istap == 1 ? 'button_active' : ''"
        v-for="(item, index) in sport_arr"
        :key="index"
        @click="change_spotr(index)"
      >
        {{ item.name }}
      </div>
    </div>

    <!-- 菜单录入 -->
    <div class="same_title">
      <p></p>
      <p>菜单录入</p>
    </div>

    <div class="index_box">
      <div class="index_nav">
        <div
          :class="item.istap == 1 ? 'week_active' : ''"
          v-for="(item, index) in week_arr"
          :key="index"
          @click="change_spotr(index)"
        >
          {{ item.name }}
        </div>
      </div>
      <div class="input_text">
        <div class="food_one">
          <p>早餐</p>
          <div>
            <el-input
              type="textarea"
              placeholder="请输入具体的菜单，最好精确到克"
              v-model="textarea"
              maxlength="200"
              show-word-limit
            >
            </el-input>
          </div>

          <div>
            <el-input
              v-model="input"
              placeholder="请输入卡路里含量(选填)"
            ></el-input>
          </div>
        </div>

        <div class="food_one">
          <p>午餐</p>
          <div>
            <el-input
              type="textarea"
              placeholder="请输入具体的菜单，最好精确到克"
              v-model="textarea"
              maxlength="200"
              show-word-limit
            >
            </el-input>
          </div>

          <div>
            <el-input
              v-model="input"
              placeholder="请输入卡路里含量(选填)"
            ></el-input>
          </div>
        </div>

        <div class="food_one">
          <p>晚餐</p>
          <div>
            <el-input
              type="textarea"
              placeholder="请输入具体的菜单，最好精确到克"
              v-model="textarea"
              maxlength="200"
              show-word-limit
            >
            </el-input>
          </div>

          <div>
            <el-input
              v-model="input"
              placeholder="请输入卡路里含量(选填)"
            ></el-input>
          </div>
        </div>

        <div class="food_one">
          <p>夜宵</p>
          <div>
            <el-input
              type="textarea"
              placeholder="请输入具体的菜单，最好精确到克"
              v-model="textarea"
              maxlength="200"
              show-word-limit
            >
            </el-input>
          </div>

          <div>
            <el-input
              v-model="input"
              placeholder="请输入卡路里含量(选填)"
            ></el-input>
          </div>
        </div>
      </div>
    </div>

    <!-- 按钮 -->
    <div class="add_buttons">
      <p>取消</p>
      <p>增加</p>
    </div>
  </div>
</template>

<script>
import { fooddetails } from '@/api/index'

export default {
  name: 'homework-sup',
  data() {
    return {
      class_arr: [
        { name: '一年级', istap: 1 },
        { name: '二年级', istap: 0 },
        { name: '三年级', istap: 0 },
        { name: '四年级', istap: 0 },
        { name: '五年级', istap: 0 },
        { name: '六年级', istap: 0 },
        { name: '七年级', istap: 0 },
        { name: '八年级', istap: 0 },
        { name: '九年级', istap: 0 },
        { name: '十年级', istap: 0 },
        { name: '十一年级', istap: 0 },
        { name: '十二年级', istap: 0 }
      ],
      sport_arr: [
        { name: '立定跳远', istap: 1 },
        { name: '50米跑', istap: 0 },
        { name: '坐立体前屈', istap: 0 },
        { name: '引体向上', istap: 0 },
        { name: '肺活量', istap: 0 },
        { name: '仰卧起坐', istap: 0 },
        { name: '肺活量', istap: 0 },
        { name: '仰卧起坐', istap: 0 },
        { name: '1000米', istap: 0 },
        { name: '800米', istap: 0 },
        { name: '核心力量', istap: 0 },
        { name: 'BMI', istap: 0 }
      ],
      week_arr: [
        { name: '周一', istap: 1 },
        { name: '周二', istap: 0 },
        { name: '周三', istap: 0 },
        { name: '周四', istap: 0 },
        { name: '周五', istap: 0 },
        { name: '周六', istap: 0 },
        { name: '周天', istap: 0 }
      ],
      class_index: 1,
      sport_index: 0,
      textarea: '',
      input: ''
    }
  },
  created() {
    console.log('types', this.$route.query.type);
    if (this.$route.query.type == 0) {
      //新增
    } else {
      //修改 获取信息
      this.ger_fooddetails(this.$route.query.id)
    }
  },
  methods: {
    change_class(index) {
      var arr = this.class_arr;
      console.log(index)
      for (var i in arr) {
        if (arr[index].istap == 1) {
          arr[index].istap = 0;
          return;
        } else {
          arr[index].istap = 1;
          return;
        }
      }
    },
    change_spotr(index) {
      var arr = this.sport_arr;
      for (var i in arr) {
        if (arr[index].istap == 1) {
          arr[index].istap = 0;
          return;
        } else {
          arr[index].istap = 1;
          return;
        }
      }
    },

    // 获取套餐详细数据
    async ger_fooddetails(id) {
      const res = await fooddetails(id)
      console.log('套餐详细信息', res);



    },
  },
  watch: {
    $route(val) {
      console.log(val, "333333333333333");
      var type = val.query.type;
      console.log('type', type)
    },
  }
}
</script>

<style lang="scss" scoped>
.same_title {
  display: flex;
  align-items: center;
  > p:first-child {
    width: 0.0104rem;
    height: 0.0833rem;
    background-color: #0fdd8d;
    margin-right: 0.0313rem;
  }
  > p:nth-of-type(2) {
    color: #525252;
    font-size: 0.0833rem;
    span {
      font-size: 0.0625rem;
      color: #cecece;
    }
  }
}
.container-homework {
  padding: 0.1667rem 0.1406rem;
  background-color: #fff;
  border-radius: 0.0781rem;
}
.class_box {
  width: 70%;
  display: flex;
  align-items: center;
  margin-bottom: 0.1406rem;
  flex-wrap: wrap;
  > div {
    margin-right: 2%;
    width: 0.65rem;
    padding: 0.07rem 0;
    border-radius: 0.0781rem;
    background-color: #f8f8f8;
    color: #525252;
    font-size: 0.08rem;
    text-align: center;
    margin-top: 0.1406rem;
    border: 0.0052rem solid #f8f8f8;
    &:hover {
      color: #525252 !important;
      border: 0.0052rem solid #0fdd8d !important;
      box-shadow: 0rem 0.026rem 0.0521rem 0rem #dbf4f0;
      background-color: white !important;
      cursor: pointer;
    }
  }
}
.sport_box {
  width: 100%;
}
.button_active {
  color: #525252 !important;
  border: 0.0052rem solid #0fdd8d !important;
  box-shadow: 0rem 0.026rem 0.0521rem 0rem #dbf4f0;
  background-color: white !important;
}
.index_box {
  margin-top: 0.2083rem;
}
.index_nav {
  background-color: #add3d1;
  border-radius: 0.0781rem;
  padding: 0 0.1354rem;
  padding-top: 0.0729rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  > div {
    width: 1.04rem;
    padding-top: 0.0729rem;
    padding-bottom: 0.151rem;
    color: #ffffff;
    border-top-left-radius: 0.0781rem;
    border-top-right-radius: 0.0781rem;
    text-align: center;
    font-size: 0.0833rem;
    &:hover {
      background-color: white;
      color: #0fdd8d !important;
      cursor: pointer;
    }
  }
}
.week_active {
  background-color: white;
  color: #0fdd8d !important;
}
.food_one {
  display: flex;
  align-items: start;
  justify-content: space-between;
  margin-top: 0.1563rem;
  > div:nth-of-type(1) {
    width: 45%;
    input::-webkit-input-placeholder {
      /* placeholder颜色  */
      color: #888888;
      font-size: 0.0729rem;
    }
    font-size: 0.0729rem;
    color: #525252;
  }
  > div:nth-of-type(2) {
    width: 45%;
    input::-webkit-input-placeholder {
      /* placeholder颜色  */
      color: #888888;
      font-size: 0.0729rem;
    }
    font-size: 0.0729rem;
    color: #525252;
  }
  > p {
    font-size: 0.0833rem;
    color: #525252;
  }
}
.add_buttons {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.5521rem;
  > p {
    font-size: 0.0938rem;
    border-radius: 0.0521rem;
    padding: 0.0625rem 0.3229rem;
    &:hover {
      cursor: pointer;
    }
  }
  > p:first-child {
    background-color: #f7fbfc;
    color: #525252;
    margin-right: 0.1667rem;
  }
  > p:nth-of-type(2) {
    background-color: #0fdd8d;
    color: #fff;
  }
}
</style>
